<template>
	<view>
		<uni-nav-bar :fixed="true" title="申请体验会员名额" :border="false" @clickLeft="$pageBack()" left-icon="back" background-color="#ECE6D5" :status-bar="true"></uni-nav-bar>
		<view class="top_timg flex_jc_cent">
			<image class="ibcg" src="/static/yq2.png" mode=""></image>
			<image class="itext" src="/static/yq.png" mode=""></image>
		</view>
		<view class="input flex_jc_sb">
			<view class="tit">申请数量</view>
			<view class="">
				<input v-model="params.applyCount" :min="1" type="number" placeholder="请输入" placeholder-class="input_text" />
			</view>
		</view>
		<view class="textarea">
			<view class="tit">备注信息</view>
			<view class="">
				<textarea v-model="params.applyDesc" maxlength="50" placeholder="请输入" placeholder-class="input_text"></textarea>
			</view>
		</view>
		<view class="btn" @click="handleConfirm">提交</view>
		<uni-popup ref="popupReminder" type="center">
			<view class="Popup">
				<view class="content">{{title}}</view>
				<view class="btns" @click="close">确认</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { apply } from '@/api/branch/trialMembership.js';
const { proxy } = getCurrentInstance();
const popupReminder = ref(null);
const close = () => {
	popupReminder.value.close();
};
const handleReminder = () => {
	popupReminder.value.open();
};
const params = reactive({
	applyCount: '', // 申请数量
	applyDesc: '' // 备注信息
});
const title = ref('')
const handleConfirm = () => { 
	if(params.applyCount){
		apply(params).then((res) => {
			if (res.code == 200 && res.data.status) {
				uni.$emit('updategetVipList', { msg: '页面更新' });
				uni.showToast({
					title:'已提交申请',
					icon:'none'
				})
				setTimeout(() => {
					uni.navigateBack();
				}, 1000);
			}else{
				title.value = res.data.msg
				handleReminder()
			}
		});
	}else{
		uni.showToast({
			title:'请输入数量',
			icon:'none'
		})
	}
	
};
</script>
<style lang="scss">
page {
	background: #f7f8f6;
}
.Popup {
	width: 620rpx;
	height: 280rpx;
	background: linear-gradient(180deg, #ece6d5 0%, #f7f8f6 100%);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	padding: 64rpx 40rpx 40rpx 40rpx;
	box-sizing: border-box;
	text-align: center;
	.content {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #4e3f23;
	}
	.btns {
		width: 280rpx;
		height: 72rpx;
		background: #e0d2bb;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
		text-align: center;
		line-height: 72rpx;
		margin: 60rpx auto 0rpx;
	}
}
.top_timg {
	width: 100%;
	padding: 20rpx;
	box-sizing: border-box;
	.ibcg {
		width: 710rpx;
		height: 160rpx;
	}
	.itext {
		width: 324rpx;
		height: 68rpx;
		position: absolute;
	}
}
.input {
	width: 710rpx;
	height: 80rpx;
	background: #ffffff;
	border-radius: 20rpx;
	margin: 0rpx auto 20rpx;
	padding: 0rpx 20rpx;
	box-sizing: border-box;
	.tit {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #1b1b1b;
	}
	input {
		font-size: 28rpx;
		color: #1b1b1b;
		text-align: right;
	}
}
.textarea {
	width: 710rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin: 0rpx auto 20rpx;
	padding: 20rpx;
	box-sizing: border-box;
	.tit {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #1b1b1b;
	}
	textarea {
		font-size: 28rpx;
		color: #1b1b1b;
		width: 100%;
		max-height: 120rpx;
		margin-top: 15rpx;
	}
}
.btn {
	width: 710rpx;
	height: 88rpx;
	background: #e3d0ad;
	border-radius: 60rpx 60rpx 60rpx 60rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #75613e;
	text-align: center;
	line-height: 88rpx;
	margin: 50rpx auto;
}
</style>
